Add size-limit bundle size analysis tool #705

andresz1 · 2020-05-01T12:21:49Z

Performance budget tool

This PR is an initial idea (something that I thought that maybe could be useful after @jaredpalmer tweet) of how a performance budget tool could be added automatically in every template. Having this kind of tool helps you to keep your library bundle size as small as possible. I like size-limit because besides the size it can calculate the time it would take a browser to download and execute your JS.

I added @size-limit/preset-small-lib by default but in case that library size increases, it could be easily replaced by @size-limit/preset-big-lib (adding time).

Bundle size check

yarn size

Bundle analyze

yarn analyze

GitHub action

The action added (size-limit-action) will execute size-limit a comment the PRs made with the comparison of it.

Any feedback would be appreciated and I'd be more than happy to iterate over a solution if you like the idea. Thanks in advance and for the great tool!

andresz1 · 2020-05-12T18:12:59Z

Hi @agilgur5! please let me know if you have any thoughts about this! 🙏

agilgur5 · 2020-05-16T00:27:06Z

Hey @andresz1 I definitely like the changes, thank you for the PR! I took a look when you first made the PR, but I just haven't had the time to dive deeper and review all the pieces of this.
There are a handful of related issues and some code that was commented out from removed features related to this that I need to sort through, understand how size-limit may differ from those, think through template vs. dependency route, investigate any potential impact on multi-entry and/or preserveModules, and actually review the code

andresz1 · 2020-05-19T17:58:44Z

Hi @agilgur5! I'm glad you like the idea 🎉 and thank you for the reply. Let me know if you need help. Is there any tsdx discord or spectrum channel where we could discuss ?

agilgur5 · 2020-07-26T19:08:30Z

Sorry for the delay on reviewing this, I've been incredibly stressed and busy, so larger PRs to add features got pretty backlogged as they take a good bit of time to really dive into.

There are a handful of related issues and some code that was commented out from removed features related to this that I need to sort through

Here's a few past references:

Summarizing, rollup-plugin-size-snapshot was previously used and still has some unused / commented out code references to it, rollup-plugin-visualizer was previously considered, and rollup-plugin-analyzer was previously recommended

understand how size-limit may differ from those

Did a quick glance through on NPM trends and size-limit seems to have a lot of nicer features:

currently maintained (some alternatives are not)
also does timing (none of the others do)
also does visualization (most of the others don't)
doesn't need to be added to Rollup build (some of the others do)

That being said, it does have more dependencies like webpack which I'm not sure are necessary for our use-case considering TSDX bundles everything with Rollup. It looks like webpack is a plugin though and can be disabled, but is included in @size-limit/preset-small-lib. The visualizations aren't as fancy as rollup-plugin-visualizer but probably nbd.

think through template vs. dependency route

Can probably stick to template initially as a testing ground and then move to a dependency later if there is enough usage. Though with #634 we're moving a bit away from dependencies.

investigate any potential impact on multi-entry and/or preserveModules

I think this will require something like webpack to bundle pieces. Multi-entry it would need to show each entry and preserveModules should theoretically all be bundled up from one entry. It looks like this can be configured with size-limit

and actually review the code

In progress.

Is there any tsdx discord or spectrum channel where we could discuss ?

No, and I don't think that would be helpful either. Keeping discussions async and transparent on a PR is ideal. Watching those channels would take more time as well.

agilgur5

2 questions and a few changes needed to all CI workflows, but the rest looks good! Thank you for the PR and sorry for the wait.

templates/basic/.github/workflows/size.yml

agilgur5 · 2020-07-26T19:14:46Z

templates/basic/.github/workflows/size.yml

+    env:
+      CI_JOB_NUMBER: 1


what's the purpose of this? I found https://github.com/ai/ci-job-number, but this doesn't run a matrix in any case; there is only one job here.

I wasn't able to remember why this was needed 😱 I tried without it and the problem is that size-limit doesn't work properly in the action (it throws an error), so for now is needed. I'll try to investigate more about this

Do you have a log of the error? Since this is the only job in this new workflow, making it go first shouldn't be necessary, but maybe the action relies on this variable being specified in order to work

src/templates/basic.ts

agilgur5 · 2020-07-26T19:27:10Z

Ah, also

Two references from above comment should be removed here too:
- https://github.com/formium/tsdx/blob/79dddc4ed6aeee89472999cede9e44ac951c548c/src/createRollupConfig.ts#L197-L199
- https://github.com/formium/tsdx/blob/5e5c3f804e68609083be978a080ab905dc7ec19d/src/env.d.ts#L15
Should really add some docs somewhere about this. The template READMEs may be appropriate places for that since they mention CI

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

agilgur5

Thanks for iterating on this after the long delay @andresz1!

Changes look mostly good, a few modifications to the docs requested. There are also 3 unresolved comments above that didn't get fixed/responded to last time around. Once those are resolved this should be good to go!

templates/basic/README.md

agilgur5 · 2020-08-25T03:41:58Z

@andresz1 I'd make the changes myself and merge but there were some unresolved questions remaining from previous review that I was hoping you could answer

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

andresz1 · 2020-08-25T21:15:12Z

@agilgur5 sorry I was on vacations and thank you so much for the great feedback! I just answered your questions and made so changes!

agilgur5 · 2020-08-29T00:50:45Z

@andresz1 no worries on the delay or if you're on vacation, everyone does that. Was just following up, especially since I couldn't find the answers to some of these myself.

agilgur5

Great work and iterations! thanks for investigating the issues -- we'll have to check back on the CI_JOB_NUMBER comment but that can be in a separate PR or done in later comments, this is ready to merge 🙂

This unfortunately didn't make v0.13.x, but will be released in v0.14.0

agilgur5 · 2020-08-29T03:21:31Z

@all-contributors please add @andresz1 for code, doc, example

allcontributors · 2020-08-29T03:21:42Z

@agilgur5

I've put up a pull request to add @andresz1! 🎉

…mer#705) - Add size-limit and size-limit-action to all templates - Use `@size-limit/preset-small-lib` by default - Add `yarn size` and `yarn visualize` scripts - Remove outdated references to rollup-plugin-size-snapshot Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

andresz1 added 2 commits May 1, 2020 13:53

Add size-limit and size-limit-action by default

6a0bea9

Upgrade size-limit-action version

c9567c1

agilgur5 mentioned this pull request Jun 7, 2020

How to explore bundle size? #741

Closed

This was linked to issues Jul 26, 2020

How to explore bundle size? #741

Closed

Explore rollup-plugin-visualizer #496

Closed

agilgur5 changed the title ~~Add a performance budget tool~~ Add a bundle size analysis tool Jul 26, 2020

agilgur5 reviewed Jul 26, 2020

View reviewed changes

Update templates/basic/.github/workflows/size.yml

e76ef46

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

This comment has been minimized.

Sign in to view

vercel bot temporarily deployed to Preview July 30, 2020 19:51 Inactive

Update templates/basic/.github/workflows/size.yml

064bc7b

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot had a problem deploying to Preview July 30, 2020 19:52 Failure

Merge remote-tracking branch 'upstream/master'

48a1456

vercel bot deployed to Preview July 30, 2020 20:10 View deployment

Add documentation in the README.md templates

a9d4708

vercel bot deployed to Preview July 30, 2020 20:59 View deployment

Update size.yml files with given reviews

73a356e

vercel bot deployed to Preview July 30, 2020 21:00 View deployment

Remove rollup-plugin-size-snapshot

ce6f47e

vercel bot deployed to Preview July 30, 2020 21:05 View deployment

agilgur5 reviewed Aug 11, 2020

View reviewed changes

templates/basic/README.md Outdated Show resolved Hide resolved

templates/basic/README.md Outdated Show resolved Hide resolved

templates/basic/README.md Outdated Show resolved Hide resolved

agilgur5 added the scope: templates Related to an init template, not necessarily to core (but could influence core) label Aug 19, 2020

agilgur5 added this to the v0.13.x - Template Improvements & More milestone Aug 23, 2020

Update templates/basic/README.md

b4b8094

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot temporarily deployed to Preview August 25, 2020 20:22 Inactive

Update templates/basic/README.md

3f1156b

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot temporarily deployed to Preview August 25, 2020 20:22 Inactive

Update templates/basic/README.md

49e379f

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot deployed to Preview August 25, 2020 20:22 View deployment

Update size-limit-action version

f7f5bfd

vercel bot deployed to Preview August 25, 2020 21:07 View deployment

agilgur5 mentioned this pull request Aug 29, 2020

Add bundle size GH action to all templates #841

Closed

agilgur5 linked an issue Aug 29, 2020 that may be closed by this pull request

Add bundle size GH action to all templates #841

Closed

agilgur5 modified the milestones: v0.13.x - Template Improvements & More, v0.14.0 - Dep Upgrades - Jest 25 + Node 10 Aug 29, 2020

agilgur5 approved these changes Aug 29, 2020

View reviewed changes

agilgur5 changed the title ~~Add a bundle size analysis tool~~ Add size-limit bundle size analysis tool Aug 29, 2020

agilgur5 merged commit 2938ed9 into jaredpalmer:master Aug 29, 2020

allcontributors bot mentioned this pull request Aug 29, 2020

docs: add andresz1 as a contributor #842

Merged

agilgur5 mentioned this pull request Oct 14, 2020

Improve template CI: add matrix testing, use bahmutov/npm-install #882

Merged

agilgur5 mentioned this pull request Mar 16, 2021

Rollup warnings during UMD builds: "but could not be resolved -- treating it as an external dependency" and "No name was provided for external module" #989

Closed

Repository owner locked as resolved and limited conversation to collaborators Mar 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add size-limit bundle size analysis tool #705

Add size-limit bundle size analysis tool #705

andresz1 commented May 1, 2020 •

edited

Loading

andresz1 commented May 12, 2020

agilgur5 commented May 16, 2020 •

edited

Loading

andresz1 commented May 19, 2020 •

edited

Loading

agilgur5 commented Jul 26, 2020 •

edited

Loading

agilgur5 left a comment

agilgur5 Jul 26, 2020

andresz1 Aug 25, 2020

agilgur5 Aug 29, 2020

agilgur5 commented Jul 26, 2020 •

edited

Loading

This comment has been minimized.

agilgur5 left a comment

agilgur5 commented Aug 25, 2020

andresz1 commented Aug 25, 2020

agilgur5 commented Aug 29, 2020

agilgur5 left a comment

agilgur5 commented Aug 29, 2020

allcontributors bot commented Aug 29, 2020

Add size-limit bundle size analysis tool #705

Add size-limit bundle size analysis tool #705

Conversation

andresz1 commented May 1, 2020 • edited Loading

Performance budget tool

Bundle size check

Bundle analyze

GitHub action

andresz1 commented May 12, 2020

agilgur5 commented May 16, 2020 • edited Loading

andresz1 commented May 19, 2020 • edited Loading

agilgur5 commented Jul 26, 2020 • edited Loading

agilgur5 left a comment

Choose a reason for hiding this comment

agilgur5 Jul 26, 2020

Choose a reason for hiding this comment

andresz1 Aug 25, 2020

Choose a reason for hiding this comment

agilgur5 Aug 29, 2020

Choose a reason for hiding this comment

agilgur5 commented Jul 26, 2020 • edited Loading

This comment has been minimized.

agilgur5 left a comment

Choose a reason for hiding this comment

agilgur5 commented Aug 25, 2020

andresz1 commented Aug 25, 2020

agilgur5 commented Aug 29, 2020

agilgur5 left a comment

Choose a reason for hiding this comment

agilgur5 commented Aug 29, 2020

allcontributors bot commented Aug 29, 2020

andresz1 commented May 1, 2020 •

edited

Loading

agilgur5 commented May 16, 2020 •

edited

Loading

andresz1 commented May 19, 2020 •

edited

Loading

agilgur5 commented Jul 26, 2020 •

edited

Loading

agilgur5 commented Jul 26, 2020 •

edited

Loading